/*
 * @Description: 层级组件 - 表格组件
 * @Author: Rfan
 * @Date: 2022-06-21 10:25:48
 * @LastEditTime: 2022-09-19 10:39:38
 */

import { useEffect, useMemo, useState } from 'react';
import { Table } from 'antd';
import { debounce } from 'lodash-es';
import { isNullObj } from '@/utils';
import { useLevelTableContext } from '../contexts/LevelTableContext';
import Preview from '@/components/Preview';
import type { CSSProperties } from 'react';

const LevelTableList = (props: any) => {
  const {
    eRecordTitle,
    baseInfo,
    selectItems,
    upperInfo,
    upperFields,
    tableHeight,
    setSelectedItem,
    selectChange
  } = useLevelTableContext();

  // 表格loading状态
  const [loading] = useState(false);
  // 表格列表
  const [list, setList] = useState([]);
  const [columns, setColumns] = useState([]);
  // 总页数

  // 选中条目数据
  const [editData, setEditData] = useState({});
  // 预览弹窗状态
  const [previewDialogVisible, setPreviewDialogVisible] = useState(false);
  // 表格样式
  const [tableStyle, setTableStyle] = useState<CSSProperties>({});

  useEffect(() => {
    if (baseInfo && baseInfo.length > 0) {
      const _list = baseInfo.map((item: any) => item.exportData);
      const keys = Object.keys(_list[0]);
      setList(_list);
      setColumns(
        keys.map((key) => ({
          title: baseInfo?.[0]?.level === 0 ? eRecordTitle[key] || key : key,
          dataIndex: ['exportData', key],
          key
        }))
      );
      if (baseInfo[0]?.child && baseInfo[0].child.length > 0) {
        selectChange(baseInfo[0]);
      }
    }
  }, [baseInfo]);

  useEffect(() => {
    if (tableHeight) {
      setTableStyle({ height: `${tableHeight}px`, overflowX: 'hidden', overflowY: 'auto' });
    } else if (!isNullObj(tableStyle)) {
      setTableStyle({});
    }
  }, [tableHeight]);

  /**
   * @description: 案卷表格选中相关
   * @param {number} selectedRowKeys
   */
  const onSelectChange = (selectedRowKeys: number[]) => {
    setSelectedItem(selectedRowKeys);
  };

  /**
   * @description: 列表选中条目方法
   * @param {any} record 选中的条目
   */
  const selectRow = (record: any) => {
    console.log('row', record);
    if (record?.child && record.child.length > 0) {
      selectChange(record);
    }
  };

  /**
   * @description: 双击行方法
   * @param {any} record 选中的条目
   */
  const doubleClickTable = (record: any) => {
    setEditData(record.exportData);
    setPreviewDialogVisible(true);
  };

  return (
    <div>
      {useMemo(
        () => (
          <Table
            columns={columns}
            dataSource={baseInfo}
            loading={loading}
            rowKey="自定义ID"
            scroll={{ x: 'max-content' }}
            size="small"
            bordered
            style={{ height: 275, overflowX: 'hidden', overflowY: 'auto' }}
            onRow={(record) => ({
              onClick: debounce(() => {
                selectRow(record);
              }, 200),
              onDoubleClick: () => {
                doubleClickTable(record);
              }
            })}
          ></Table>
        ),
        [selectItems, loading, columns, list]
      )}

      {/* 预览弹窗 */}
      {useMemo(
        () => (
          <>
            {baseInfo[0]?.level === 0 && list.length > 0 && (
              <Preview
                visible={previewDialogVisible}
                title="原文预览"
                data={editData}
                list={list}
                upper={upperInfo}
                fields={upperFields}
                onClose={() => {
                  setPreviewDialogVisible(false);
                }}
              />
            )}
          </>
        ),
        [previewDialogVisible]
      )}
    </div>
  );
};

export default LevelTableList;
